<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片放大特效</title>
		<style type="text/css">
			#box{
				width: 350px;
				height: 350px;
				border: 1px solid #ccc;
				position:  relative;
			}
			#bigBox{
				width: 400px;
				height: 400px;
				position: absolute;
				top: 0px;
				left: 360px;
				border: 1px solid #CCC;
				overflow: hidden;
				display: none;
			}
			#mask{
				width: 175px;
				height: 175px;
				background: rgba(255,255,0,0.4);
				position: absolute;
				top: 0;
				left: 0;
				cursor: move;
				display: none;
			}
			#bingImg{
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="smallBox">
				<img src="small.jpg"/>
				<div id="mask"></div>
			</div>
			<div id="bigBox">
				<img src="big.jpg" id="bigImg"/>
			</div>
		</div>
		<script type="text/javascript">
			function $(obj){
				return document.getElementById(obj);
			}
			//移入
			$('smallBox').onmouseover=function(){
				$('mask').style.display='block';
				$('bigBox').style.display='block';
			}
			//移出
			$('smallBox').onmouseleave=function(){
				$('mask').style.display='none';
				$('bigBox').style.display='none';
			}
			$('smallBox').onmousemove=function(){
				//获取鼠标位置
				var X=event.pageX;
				var Y=event.pageY;
				//获取遮罩位置
				var maskX=X-$('mask').offsetWidth/2;
				var maskY=Y-$('mask').offsetHeight/2;
				if(maskX<0){
					maskX=0;
				}
				if(maskY<0){
					maskY=0;
				}
				if(maskX>$('box').offsetWidth-$('mask').offsetWidth){
					maskX=$('box').offsetWidth-$('mask').offsetWidth;
				}
				if(maskY>$('box').offsetHeight-$('mask').offsetHeight){
					maskY=$('box').offsetHeight-$('mask').offsetHeight;
				}
				$('mask').style.left=maskX+'px';
				$('mask').style.top=maskY+'px';
				
				var bigImgToMove=$('bigImg').offsetWidth-$('bigBox').offsetWidth;
				var maskToMove=$('smallBox').offsetWidth-$('mask').offsetWidth;
				var rate=bigImgToMove/maskToMove;
				
				$('bigImg').style.left=-rate*maskX+'px';
				$('bigImg').style.top=-rate*maskY+'px';
			}
			
		</script>
	</body>
</html>
